<template>
  <el-dialog
    title="房间电表设置"
    :model-value="visible"
    width="480px"
    :fullscreen="mobile"
    :close-on-click-modal="false"
    @close="handleCancel"
    class="dialog-content-clear"
  >
    <el-alert type="info" :closable="false">设定值是：1000-18400范围内，设定过低电表到达阀值会自动断电</el-alert>
    <el-form :model="form" ref="formRef" label-width="100px" class="ph-16 mt20">
      <el-form-item prop="maxPower" :rules="[
        { required: true, message: '阀值设置在1000 - 18400范围内', trigger: 'blur' },
        { pattern: /^([1-9][0-9]{3}|1[0-7]\d{3}|18[0-3]\d{2}|18400)$/, message: '阀值设置在1000 - 18400范围内', trigger: 'blur' }
      ]">
        <el-input v-model="form.maxPower" placeholder="请输入功率阈值" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleOk" type="primary">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="LockEdit">
import useAppStore from '@/store/modules/app'

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  visible: Boolean,
  row: {
    type: Object,
    default: () => {}
  }
})
const data = reactive({
  form: {
    maxPower: undefined
  }
})
const { form } = toRefs(data)
const mobile = computed(() => useAppStore().device === 'mobile')
watch(() => props.value, value => {
  if (value) {
    form.value.maxPower = props.row.maxPower
  }
})

/* 取消 */
function handleCancel() {
  emit('cancel')
}
/* 提交保存 */
function handleOk() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      emit('ok', form.value)
    }
  })
}

</script>
